<script setup>
import {onMounted, useTemplateRef,ref} from 'vue';
import axios from 'axios';
defineProps({
    val:{
        type:String,
        default:''
    }
});
let emit = defineEmits(['update:val']);
let list = ref([])
onMounted(()=>{
    axios.get('/api/permission_list').then(res=>{
        console.log(res)
        list.value = res.data.data;
    })
})
let box = useTemplateRef('box');
function sel(){
    let arr = [];
    let ops = box.value.selectedOptions;
    for(let i=0;i<ops.length;i++){
        arr.push(ops[i].value);
    }
    emit('update:val',arr.join(","));
}
</script>
<template>
    <select ref="box" multiple @change="sel">
        <option v-for="item in list" :key="item.id" :selected="val.split(',').indexOf(item.permitName)!=-1">{{ item.permitName }}</option>
    </select>
</template>

<style scoped>
select{
    height:50px !important;
}
</style>